<template>
  <a-layout>
    <a-layout-header class="header">
      <div class="header-nav">
        <p class="header-title">URP高校毕业论文系统</p>
        <div></div>
        <div class="header-nav-user">
          <span>张晓明</span>
          <span @click="logout">退出登录</span>
        </div>
      </div>
    </a-layout-header>
    <a-layout>
      <a-layout-sider>
        <a-menu
          v-model:selectedKeys="selectedKeys"
          v-model:openKeys="openKeys"
          mode="inline"
          :style="{ height: '100%', borderRight: 0 }"
          @click="clickMenu"
        >
          <photo></photo>
          <!-- <div style="width: 60px; height: 100px;">那单</div> -->

          <a-sub-menu key="/sys">
            <template #title>
              <span> <user-outlined />论文过程管理 </span>
            </template>
            <a-menu-item key="/sys/user">提交任务书</a-menu-item>
            <a-menu-item key="/sys/role">开题报告审核</a-menu-item>
            <a-menu-item key="/sys/auth">论文终稿提交</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="/reply">
            <template #title>
              <span> <user-outlined />评阅答辩管理 </span>
            </template>
            <a-menu-item key="/reply/plan">师生答辩安排</a-menu-item>
            <a-menu-item key="/reply/plantwo">二次答辩安排</a-menu-item>
            <a-menu-item key="/reply/record">答辩记录安排</a-menu-item>
            <a-menu-item key="/reply/recordtwo">二辩记录录入</a-menu-item>
          </a-sub-menu>
          <!-- <a-menu-item key="/dashoard"> -->
          <!-- <pie-chart-outlined /> -->
          <!-- <span>后台汇总</span> -->
          <!-- </a-menu-item> -->
          <a-sub-menu key="/paper">
            <template #title>
              <span>
                <!-- <user-outlined /> -->
                <i class="iconfont icon-xueshimao"></i>
                论文过程管理
              </span>
            </template>
            <a-menu-item key="/paper/task">提交任务书 </a-menu-item>
            <a-menu-item key="/paper/report">提交开题报告</a-menu-item>
            <a-menu-item key="/paper/final">提交终稿</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="/correct">
            <template #title>
              <span>
                <!-- <user-outlined /> -->
                <i class="iconfont icon-shuangren"></i>
                评阅答辩管理
              </span>
            </template>
            <a-menu-item key="/correct/my">我的答辩安排 </a-menu-item>
            <a-menu-item key="/correct/two">二次答辩安排</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="/gradeRegulate">
            <template #title>
              <span> <user-outlined />成绩管理 </span>
            </template>
            <a-menu-item key="/gradeRegulate/score">导师录入成绩</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="/lunw">
            <template #title>
              <span> <user-outlined />论文文档 </span>
            </template>
            <a-menu-item key="/lunw/sort">导出学生文档</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="/xue">
            <template #title>
              <span> <user-outlined />统计分析 </span>
            </template>
            <a-menu-item key="/xue/tonji">论文汇总分析</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="/grade">
            <template #title>
              <span> <i class="iconfont icon-AApay">查看成绩</i></span>
            </template>
            <a-menu-item key="/grade/debate">一辩成绩 </a-menu-item>
            <a-menu-item key="/grade/arguments">二辩成绩</a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout style="padding: 0 70px 70px">
        <!-- 面包屑 -->
        <a-breadcrumb style="margin: 16px 0">
          <template v-for="(item, index) in crumbs" :key="index">
            <a-breadcrumb-item>
              <template v-if="item.url != ''">
                <router-link :to="item.url">{{ item.title }}</router-link>
              </template>
              <template v-else>{{ item.title }}</template>
            </a-breadcrumb-item>
          </template>
        </a-breadcrumb>
        <a-layout-content
          :style="{
            background: '#fff',
            padding: '24px',
            margin: 0,
            minHeight: '280px',
          }"
        >
          <router-view />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>

<script setup>
import photo from "./photo.vue";
import { useRouter, useRoute } from "vue-router";
import { UserOutlined } from "@ant-design/icons-vue";
import { ref, createVNode, watch } from "vue";
import { Modal } from "ant-design-vue";
import useUserStore from "@/store/common";
const router = useRouter();
const route = useRoute();
const userStore = useUserStore();

const crumbs = ref([]);

// 默认选中
const selectedKeys = ref(["/dashoard"]);
// 如果有二级菜单默认有展开项是那个
const openKeys = ref(["/sys"]);

// 选中二级路由调整
const clickMenu = ({ key: url }) => {
  console.log(url);
  router.push(url);
};

// 退出登录
const logout = () => {
  Modal.confirm({
    title: "用户退出确认",
    content: "真的需要退出吗",
    okText: "确认",
    cancelText: "取消",
    onOk: () => {
      // 清空本地中存储的用户登录状态数据
      userStore.setUser({});
      window.location.href = "/login";
    },
    onCancel: () => {},
  });
};
// 监听路由的变化
watch(
  route,
  (to) => {
    crumbs.value = to.meta.crumb;
    selectedKeys.value = [to.path];
    openKeys.value = ["/" + to.path.split("/")[1]];
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>

<style lang="scss" scoped>
.ant-layout {
  min-height: 100%;
}
.header {
  padding: 0;
  display: flex;
  height: 56px;
  width: 100%;
  background-color: #1890ff !important;

  .header-title {
    font-size: 20px;
    font-weight: bold;
    color: #f8f8f9;
    line-height: 56px;
  }
  .header-nav {
    height: 100%;
    width: 100%;
    /* background: #fff; */
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 20px;
    background-color: #1890ff;
    > div:last-child {
      span {
        color: white;
        margin-right: 10px;
        &:last-child {
          cursor: pointer;
        }
      }
    }
  }
}
.ant-menu {
  width: 240px;
  /* background-color: white; */
}
.logo {
  width: 120px;
  height: 31px;
  margin: 16px auto;
  background: rgba(255, 255, 255, 0.3);
}
</style>
